<!DOCTYPE html>
<html>

<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>公共卫生网络信息监测系统</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/list.css">
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>

    <script src="js/My97DatePicker/WdatePicker.js"></script>
    <link href="css/sy.css" rel="stylesheet" type="text/css"/>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css"/>

</head>

<body id="top">
<!-- 头部 -->
<div class="sy_headBox">
    <div class="sy_top">
        <div class="sy_top_con">
            <img src="images/title_logo.png" class="fl" onclick="javascript:window.location.href= 'index.html'"/>
            <span class="user_name">欢迎您！</span>|
            <a href="/logout">注销</a>
        </div>
    </div>
    <div class="sy_slogin"><img src="images/logo.png"/></div>

</div>
<div id="app" class="main" v-cloak>
    <div class="cw1200 clearfix" style="display: flex;">
        <div class="leftside fl">
            <div class="left-bg"></div>
            <h1 class="left-title"><span>HOTSPOT <strong>MONITORING</strong></span>
                <p>- 分类导航 -</p></h1>
            <ul class="left-nav ztjc-left-nav">

                <li class="first-nav" v-for="(theme,index) in themeList">
                    <a :class="{active:queryData.type == theme.id || theme.id == typeParent}"
                       v-on:click="themeActiveParentChange(theme.id)" href="javascript:;">{{theme.themename}}</a>
                    <dl class="left-sub" :class="{displayblock:queryData.type == theme.id || theme.id == typeParent}">
                        <dd v-for="child in theme.childList"><a :class="{active:queryData.type == child.id}"
                                                                v-on:click="themeActiveChange(child.id)"
                                                                href="javascript:;">-{{child.themename}}</a></dd>
                        <!--                        <dd><a href="javascript:;">-人民军队</a></dd>-->
                        <!--                        <dd><a href="javascript:;">-部队</a></dd>-->
                    </dl>
                </li>
                <!--                <li>-->
                <!--                    <span class="chart"></span>-->
                <!--                    <a href="javascript:;">国防科技</a>-->
                <!--                    <dl class="left-sub">-->
                <!--                        <dd><a href="javascript:;">-武器装备</a></dd>-->
                <!--                        <dd><a href="javascript:;">-武器弹药</a></dd>-->
                <!--                        <dd><a href="javascript:;">-军事技术</a></dd>-->
                <!--                        <dd><a href="javascript:;">-武警装备</a></dd>-->
                <!--                    </dl>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <span class="chart"></span>-->
                <!--                    <a href="javascript:;">海洋资源</a>-->
                <!--                    <dl class="left-sub">-->
                <!--                        <dd><a href="javascript:;">-领海</a></dd>-->
                <!--                        <dd><a href="javascript:;">-海域</a></dd>-->
                <!--                        <dd><a href="javascript:;">-沿海地区</a></dd>-->
                <!--                        <dd><a href="javascript:;">-海洋</a></dd>-->
                <!--                        <dd><a href="javascript:;">-油气资源</a></dd>-->
                <!--                    </dl>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <span class="chart"></span>-->
                <!--                    <a href="javascript:;">国家安全</a>-->
                <!--                    <dl class="left-sub">-->
                <!--                        <dd><a href="javascript:;">-国家主权</a></dd>-->
                <!--                        <dd><a href="javascript:;">-核心利益</a></dd>-->
                <!--                        <dd><a href="javascript:;">-国防动员</a></dd>-->
                <!--                        <dd><a href="javascript:;">-国家安全委员会</a></dd>-->

                <!--                    </dl>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <span class="chart"></span>-->
                <!--                    <a href="javascript:;">海警舰船</a>-->
                <!--                    <dl class="left-sub">-->

                <!--                    </dl>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <span class="chart"></span>-->
                <!--                    <a href="javascript:;">海上执法</a>-->
                <!--                    <dl class="left-sub">-->

                <!--                    </dl>-->
                <!--                </li>-->
            </ul>
        </div>
        <div class="rightside fr" id="rightList">
            <div class="right-search">
                <input class="secInput" type="text" maxlength="100" name="" v-model="queryData.keywords"
                       placeholder="可检索字段包括标题、正文">
                <span class="right-tit date-title">发布时间：</span>

                <div class="dateRange clearfix">
                    <div class="date-box">
                        <input id="datetimepicker" type="text" class="Wdate">

                    </div>

                    <label>到</label>
                    <div class="date-box">
                        <input id="datetimepicker2" type="text" class="Wdate">
                    </div>
                </div>
                <input class="secBtn" type="button" name="" value="检索" v-on:click="searchData()">
            </div>

            <div class="right-top clearfix">

            </div>

            <div class="right-cont">
                <div class="right-item clearfix">
                    <span class="right-tit">排序:</span>
                    <a class="order down" id="orderTime" v-on:click="orderTypeChange()" href="javascript:;">发布时间</a>
                    <!--                    <a class="order down" id="orderView" href="javascript:;">浏览量</a>-->
                </div>
                <!--                <div class="right-item clearfix">-->
                <!--                    <div class="checkbox" name="checkAll"><input id="checkAll" type="checkbox"-->
                <!--                                                                 name="checkAll"><label></label></div>-->
                <!--                    <span>全选&emsp;&emsp;已选&nbsp;<i id="checkNum">0</i></span>-->
                <!--                    <a class="clearChecked" href="javascript:;">清除</a>-->
                <!--                    <ul>-->
                <!--                        <li><a href="javascript:;" id="sendWarning">发送预警</a></li>-->
                <!--                        <li class="line"></li>-->
                <!--                        <li><a href="javascript:;" id="batchDelete">批量删除</a></li>-->
                <!--                        <li class="line"></li>-->
                <!--                        <li><a href="javascript:;" id="batchDownload">批量下载</a></li>-->
                <!--                        <p>找到5600条结果</p>-->
                <!--                    </ul>-->
                <!--                </div>-->
            </div>
            <dl class="cont-list">
                <dd class="cont-box clearfix is-error" v-for="item in dataList">
                    <div class="checkbox" name="check"><input id="check-1" type="checkbox" name="check"><label></label>
                    </div>

                    <a class="title"
                       :href="'/detail.html?id='+item.urlid+'&type='+item.type"><span>{{item.title}}</span></a>
                    <!--                    <a class="showSame clickdown" href="javascript:;">[点击展开3篇重复文章]</a>-->
                    <div class="clearfix"></div>
                    <p class="zhaiyao">
                    <div v-html="item.digest"></div>
                    </p>
                    <span class="date">发布时间：{{item.pubdate}}</span>
                    <span class="source">来源：{{item.website}}</span>
                    <!--                    <a class="collect" href="javascript:;">13</a>-->
                    <!--                    <span class="viewNum">42</span>-->
                    <!--                    <a class="error" href="javascript:;"></a>-->
                    <div class="clearfix"></div>
                    <!--                    <ul class="sameList">-->
                    <!--                        <li><a class="sameTitle" href="javascript:;">人感染甲型H7N9禽流感病毒——中国人感染甲型H7N9禽流感病毒——中国人感染甲型H7N9禽流感病毒——中国人感染甲型H7N9禽流感病毒——中国人感染甲型H7N9禽流感病毒——中国</a><span-->
                    <!--                                class="sameTime">发布时间：2017-08-13</span><span class="sameSource">来源：新华网来源：新华网来源：新华网来源：新华网来源：新华网来源：新华网</span>-->
                    <!--                        </li>-->
                    <!--                        <li><a class="sameTitle" href="javascript:;">人感染甲型H7N9禽流感病毒——中国</a><span class="sameTime">发布时间：2017-08-13</span><span-->
                    <!--                                class="sameSource">来源：新华网</span></li>-->
                    <!--                        <li><a class="sameTitle" href="javascript:;">人感染甲型H7N9禽流感病毒——中国</a><span class="sameTime">发布时间：2017-08-13</span><span-->
                    <!--                                class="sameSource">来源：江苏省疾病预防控制中心</span></li>-->
                    <!--                    </ul>-->
                </dd>
            </dl>
            <div class="pages">
                <div class="resultP">共{{totalCount}}条结果</div>
                <div class="resultP">当前第<span>{{queryData.pageNo}}</span>页 共{{pageCount}}页</div>
                <div class="pagenav">
                    <a href="javascript:void(0);" v-on:click="goPage('First')"
                       class="page-first disable">首页</a>
                    <a href="javascript:void(0);"
                       v-on:click="goPage('Previous')"
                       class="page-prev disable">上一页</a>
                    <a href="javascript:void(0);" v-on:click="goPage('Next')"
                       class="page-next">下一页</a>
                    <a href="javascript:void(0);" v-on:click="goPage('Last')"
                       class="page-last">尾页</a>
                </div>
                <input class="inputTxt c_num" type="text" name="" id="" value="1">
                <input type="button" class="inputBtn" value="GO"
                       v-on:click="gotoPage()"/>
            </div>
        </div>
    </div>
</div>
<div class="main footer">
    <p>地址：北京市西城区白广路***********</p>
    <p>电话：010-83******</p>
    <p>版权所有：**省疾病预防控制中心&emsp;&emsp;网站备案：*ICP备********号</p>
</div>
<a class="top" name="#top" href="javascript:;" title="回到顶部"></a>


</body>
<script src="js/jquery.js"></script>
<script src="js/jquery.datetimepicker.full.js"></script>
<script type="text/javascript">


    let params = location.href.split("?");
    let keywords = null, type = null, typeParent = null;
    if (params.length > 1) {
        paramName = params[1].split("=")[0];
        paramValue = decodeURI(params[1].split("=")[1]);
        if (paramName == 'keywords') {
            keywords = paramValue;
        } else if (paramName == 'type') {
            type = paramValue;
        } else if (paramName == 'parentType') {
            type = paramValue;
            typeParent = type.split(".")[0] + ".";
        }
    }
    $(function () {
        $(".user_name").append(localStorage.getItem("username"))
    })

    let app = new Vue({
        el: "#app",
        data: {
            queryData: {
                pageNo: 1,
                pageNum: 5,
                keywords: keywords,
                type: type,
                startTime: null,
                endTime: null,
                orderField: "pubdate",
                orderType: 1
            },
            themeList: [],
            dataList: [],
            totalCount: 0,
            pageCount: 0,
            typeParent: typeParent,
        },
        methods: {
            initData() {
                axios.post("/data/search", this.queryData).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.themeList = result.themeTreeList;
                        app.dataList = result.dataList;
                        app.totalCount = result.totalCount;
                        app.pageCount = Math.ceil(result.totalCount / app.queryData.pageNum);
                    }
                })
            },
            themeActiveChange(type) {
                this.queryData.type = type;
                this.searchData();
            }
            ,
            themeActiveParentChange(type) {
                this.queryData.type = type;
                this.typeParent = type;
                this.searchData();
            }
            ,
            orderTypeChange() {
                this.queryData.orderType = 1 ^ this.queryData.orderType;
                this.searchData();
            },
            searchData() {
                this.queryData.startTime = $("#datetimepicker").val();
                this.queryData.endTime = $("#datetimepicker2").val();
                if (this.queryData.type == null) {
                    this.initData();
                } else this.searchLeaf();
            },
            searchLeaf() {
                axios.post("/data/search/leaf", this.queryData).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.dataList = result.dataList;
                        app.totalCount = result.totalCount;
                        app.pageCount = Math.ceil(result.totalCount / app.queryData.pageNum);
                    }
                })
            },
            goPage(operation) {//上一页下一页
                if (operation == "First") {
                    this.queryData.pageNo = 1;
                } else if (operation == "Previous" && this.queryData.pageNo > 1) {
                    this.queryData.pageNo--;
                } else if (operation == "Next" && this.queryData.pageNo < this.pageCount) {
                    this.queryData.pageNo++;
                } else if (operation == "Last") {
                    this.queryData.pageNo = this.pageCount;
                }
                this.searchData();
            },
            gotoPage() {//跳到第几页
                let pageCount = this.totalCount;
                let pageNumber = parseInt($.trim($('.c_num').val()));
                let ex = /^[0-9]*[1-9][0-9]*$/;
                if (pageNumber == "" || pageNumber > pageCount || pageNumber < 1 || !ex.test(pageNumber)) {
                    //layer.msg('请输入正确的页码');
                    return;
                }
                this.queryData.pageNo = pageNumber;
                this.searchData();
            }
        },
        mounted: function () {
            this.$nextTick(() => {
                this.initData();
            });
        }
    })
</script>
<script>
    $('#datetimepicker').datetimepicker({
        lang: "ch", //语言选择中文 注：旧版本 新版方法：$.datetimepicker.setLocale('ch');
        format: "Y-m-d",      //格式化日期
        timepicker: false
    });
    $('#datetimepicker2').datetimepicker({
        lang: "ch", //语言选择中文 注：旧版本 新版方法：$.datetimepicker.setLocale('ch');
        format: "Y-m-d",      //格式化日期
        timepicker: false
    });
</script>
</html>
